<template>
  <div class="myOrder">
      <div class="orderHead">所有订单</div>
      <div class="orderList">
          <div class="orderItem"
                v-for="order in myOrderList"
                @click="getOrderDetail(order.id,order.order_type)"
                :key="order.id">
              <div class="l">
                  <b>{{order.order_type|fmtCarType}}</b>
                  <p>
                      <i class="iconfont icon-dot time"></i>
                      <span>{{order.departure_time|fmtDate}}</span>
                  </p>
                  <p>
                      <i class="iconfont icon-dot start"></i>
                      <span>{{order.departure}}</span>
                  </p>
                  <p>
                      <i class="iconfont icon-dot end"></i>
                      <span>{{order.destination}}</span>
                  </p>
              </div>

              <div class="r">
                <span>{{order.status|orderStatus}}</span>
                <i class="iconfont icon-right"></i>
              </div>
          </div>
      </div>

      <div class="orderFooter" v-show="!has_more">没有更多订单了</div>
  </div>
</template>

<script>
    import {myOrder,myOrderDetail} from '@/http'
    import {mapGetters} from 'vuex'
    import fmtDate from '@/filters/fmtDate'
    import fmtCarType from '@/filters/fmtCarType'
    import orderStatus from '@/filters/orderStatus'
    export default {
        name:'myOrder',
        mixins:[fmtDate,fmtCarType,orderStatus],
        data(){
            return{
                myOrderList:[],
                has_more:false
            }
        },
        computed:{
            ...mapGetters(['cookie','login_info'])
        },
        methods:{
            //获取订单列表
            getOrderList(){
                
                let user_id = this.login_info.user_id;
                  myOrder({user_id}).then((data)=>{
                      this.myOrderList = data.data.rows;
                      this.has_more = data.data.has_more;
                  })
            },
            getOrderDetail(id,order_type){
                myOrderDetail({id,order_type}).then((data)=>{
                    //订单详情页面
                    let status = data.data.order.status;
                    let travelStatus = ['1','2','3','4','5','6','11',];

                    //直接跳转到指定主页，并把order数据放入vuex
                    if(travelStatus.includes(status)){
                        this.$store.dispatch('curOrder',data.data.order);
                        this.$router.push('/');

                    }
                })
            }
        },
        mounted(){
            this.getOrderList()
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../style/var.scss';

    .orderHead{
       padding:10px 0;
        color:gray; 
    }
    .myOrder{
        width:100%;
        height:100%;
        padding:50px;
        background:#eaeaea;
        overflow-x: auto;

        .orderItem{
            display: flex;
            justify-content: space-between;
            background: $white;
            border-radius: 10px;
            padding:20px;
            margin-bottom:50px;
            box-shadow: 1px 1px 10px 1px $border_base;
            p{
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 600px;
            }
            .iconfont{
                font-size: 18px;
                &.time{color:red;}
                &.start{color:yellowgreen;}
                &.end{color:yellow;}
            }

            .r{
                flex-shrink:0;
            }
        }
    }


    .orderFooter{
        text-align: center;
        line-height: 150px;
        color:gray;
    }
</style>

